<nav class="breadcrumb" id="pathContainer">
    <i class="Hui-iconfont Hui-iconfont-weizhi"></i>
    <span>您的位置：</span>
    <span>系统配置</span>
    <span class="c-999 en">&gt;</span>
    <span class="c-primary">角色管理</span>
    <span class="c-999 en">&gt;</span>
    <span class="c-primary">新增</span>
    <div class="f-r">
        <input class="btn btn-default size-S radius f-r mr-30 mt-5" type="button" id="back" value="返回">
    </div>
</nav>
<table id="onClickDataTable" class="page table table-border table-bordered table-hover col-98"></table>

<!-- 动态模板-分割  -->
<script id="navMain" type="text/x-handlebars-template">
    <i class="Hui-iconfont Hui-iconfont-weizhi"></i>
    <span>您的位置：</span>
    <span>系统配置</span>
    <span class="c-999 en">&gt;</span>
    <span class="c-primary">角色管理</span>
</script>
<script id="navAdd" type="text/x-handlebars-template">
    <i class="Hui-iconfont Hui-iconfont-weizhi"></i>
    <span>您的位置：</span>
    <span>系统配置</span>
    <span class="c-999 en">&gt;</span>
    <span>角色管理</span>
    <span class="c-999 en">&gt;</span>
    <span class="c-primary">新增</span>
    <div class="f-r">
        <input class="btn btn-default size-S radius f-r mr-30 mt-5" type="button" id="back" value="返回">
    </div>
</script>
<script id="navCheck" type="text/x-handlebars-template">
    <i class="Hui-iconfont Hui-iconfont-weizhi"></i>
    <span>您的位置：</span>
    <span>系统配置</span>
    <span class="c-999 en">&gt;</span>
    <span>角色管理</span>
    <span class="c-999 en">&gt;</span>
    <span class="c-primary">查看</span>
    <input class="btn size-MINI radius f-r mr-30 mt-5" type="button" id="back" value="返回">
</script>
<script id="navEdit" type="text/x-handlebars-template">
    <i class="Hui-iconfont Hui-iconfont-weizhi"></i>
    <span>您的位置：</span>
    <span>系统配置</span>
    <span class="c-999 en">&gt;</span>
    <span>角色管理</span>
    <span class="c-999 en">&gt;</span>
    <span class="c-primary">编辑</span>
    <input class="btn size-MINI radius f-r mr-30 mt-5" type="button" id="back" value="返回">
</script>

<script id="getColumnTableData" type="text/x-handlebars-template"> //主内容
    \{{#each result.resultList}}
        <tr getId="\{{id}}" name="\{{name}}">
            <td class="col-1">\{{name}}</td>
            <td class="col-5">
                \{{#each permissions}}
                    \{{description}}
                \{{/each}}  
            </td>
            <td class="col-1">\{{roleLevel.name}}</td>
            <td class="col-2">
            \{{#if areaId}} 
                \{{area.area}}
            \{{/if}}    
            </td>

            <td class="col-1">
                \{{#mccmsShowIfEqual status '0'}}启用\{{/mccmsShowIfEqual}}
                \{{#mccmsShowIfEqual status '1'}}停用\{{/mccmsShowIfEqual}}
            </td>
            <td class="col-2">
                <input class="btn btn-secondary size-S radius" type="button" value="查看" onClick="checkDataRole(this)">
                <input class="btn btn-primary size-S radius" type="button" value="编辑" onClick="editDataRole(this)">
                <a data-toggle="modal" href="#myModal" class="btn btn-danger  size-S radius" onClick="delRoleMode(this)">删除</a>
            </td>
        </tr>
    \{{/each}}
</script>
<script id="getCheckDataRole" type="text/x-handlebars-template">  //查询表格数据
    <tr>
        <td class="col-1 text-r table-bgc-f5">角色名称 ：</td>
        <td class="col-11">
            <input  type="text" disabled="disabled" class="input-text input-col-3 bgTextColoe" value="\{{result.name}}">
        </td>
    </tr>
    <tr>
        <td class="col-1 text-r table-bgc-f5 va-t">授权 ：</td>
        <td class="col-11">
            <textarea class="input-text input-col-3 bgTextColoe" disabled="disabled">\{{#each result.permissions}}&nbsp;&nbsp;\{{description}}\{{/each}}</textarea>
        </td>
    </tr>
    <tr>
        <td class="col-1 text-r table-bgc-f5">状态 ：</td>
        <td class="col-11">
            <span class="select-box input-col-3" disabled="disabled">
                <select class="select" disabled="disabled" name="status" size="1" id="status">
                    \{{#mccmsSelect result.status}}
                        <option value="0">已启用</option>
                        <option value="1">已停止</option>
                    \{{/mccmsSelect}}
                </select>
            </span>
        </td>
    </tr>
</script>
<script id="getEditDataRole" type="text/x-handlebars-template">  //编辑表格数据
    <tr id="roleId">
        <td class="col-4 text-r table-bgc-f5">角色名称 ：</td>
        <td class="col-8" colspan="2">
            <input  type="text" class="input-text input-col-3 bgTextColoe" value="\{{result.name}}" id="roleDescription">
        </td>
    </tr>
    <tr>
        <td class="col-4 text-r table-bgc-f5">状态 ：</td>
        <td class="col-8" colspan="2">
            <span class="select-box input-col-3">
                <select class="select" name="status" size="1" id="status">
                    \{{#mccmsSelect result.status}}
                        <option value="0">已启用</option>
                        <option value="1">已停止</option>
                    \{{/mccmsSelect}}
                </select>
            </span>
        </td>
    </tr>
    <tr>
        <td class="col-12 text-c table-bgc-f5" colspan="3">授权</td>
    </tr>
    <tr>
        <td class="col-4 text-c table-bgc-f5">菜单</td>
        <td class="col-4 text-c table-bgc-f5">栏目</td>
        <td class="col-4 text-c table-bgc-f5">功能</td>
    </tr>
    <tr>
        <td class="col-4 ztree va-t" id="roleMenuTree"></td>
        <td class="col-4 ztree va-t" id="roleFrontTree"></td>
        <td class="col-4 va-t skin-minimal" id="roleOptTree"></td>
    </tr>
    <tr>
        <td class="col-12 text-c" colspan="3">
            <input type="button" class="btn btn-primary radius" value="提交" onClick="postRoleEditData()">
        </td>
    </tr>
</script>
<script id="getNewDataRole" type="text/x-handlebars-template">  //新增表格数据
    <tr id="roleId">
        <td class="col-4 text-r table-bgc-f5">角色名称 ：</td>
        <td class="col-8" colspan="2">
            <input  type="text" class="input-text input-col-3 bgTextColoe" value="" id="roleDescription">
        </td>
    </tr>
    <tr>
        <td class="col-4 text-r table-bgc-f5">状态 ：</td>
        <td class="col-8" colspan="2">
            <span class="select-box input-col-3">
                <select class="select" size="1" id="select">
                    <option value="0">已启用</option>
                    <option value="1">已停止</option>
                </select>
            </span>
        </td>
    </tr>
    <tr>
        <td class="col-12 text-c table-bgc-f5" colspan="3">授权</td>
    </tr>
    <tr>
        <td class="col-4 text-c table-bgc-f5">菜单</td>
        <td class="col-4 text-c table-bgc-f5">栏目</td>
        <td class="col-4 text-c table-bgc-f5">功能</td>
    </tr>
    <tr>
        <td class="col-4 ztree va-t" id="roleMenuTree"></td>
        <td class="col-4 ztree va-t" id="roleFrontTree"></td>
        <td class="col-4 va-t skin-minimal" id="roleOptTree"></td>
    </tr>
    <tr>
        <td class="col-12 text-c" colspan="3">
            <input type="button" class="btn btn-primary radius" value="提交" onClick="postRoleNewData()">
        </td>
    </tr>
</script> 
<script>
    new roleNewData(); //生成新增模块
</script>